<template>
	<view class="status_bar">

	</view>
	<view class="header">
		<view class="" v-if="user">
			<text class="name">{{user.nickName}}</text>
			<text class="id">{{user.mobile}}</text>
		</view>
		<image src="../../static/avatar.png" mode=""></image>
	</view>
	<view class="property">
		<image src="/static/df.png" mode=""></image>
		<view class="content" @click="property">
			<text class="value">0</text>
			<text class="label">我的资产</text>
		</view>
	</view>
	<view class="ad-box">
		<image src="../../static/invertal.png" @click="invite" class="ad" mode="widthFix"></image>
	</view>
	<view class="list">
		<view class="item" @click="bank">
			<view class="">
				<image src="../../static/mcard.png" mode=""></image>
				<text>地址管理</text>
			</view>
			<image src="../../static/right.png" mode=""></image>
		</view>
		<view class="item" @click="secure">
			<view class="">
				<image src="../../static/secuity.png" mode=""></image>
				<text>账号与安全</text>
			</view>
			<image src="../../static/right.png" mode=""></image>
		</view>
		<view class="item">
			<view class="">
				<image src="../../static/messagfe.png" mode=""></image>
				<text>联系客服</text>
			</view>
			<image src="../../static/right.png" mode=""></image>
		</view>
		<view class="item">
			<view class="">
				<image src="../../static/about.png" mode=""></image>
				<text>关于我们</text>
			</view>
			<image src="../../static/right.png" mode=""></image>
		</view>
	</view>
	<button class="submit" @click="logout">退出登录</button>
</template>

<script setup>
	import {
		userInfo
	} from '@/util/api.js'
	import {
		
		ref
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	const user = ref()
	onShow(async () => {
		const token = uni.getStorageSync('token')
		if(!token){
			uni.showModal({
				title:"提示",
				content:"检测到您还未登录，需要先去登录",
				showCancel:false,
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/login/login"
						})
					}
				}
			})
		}else{
			const result = await userInfo()
			
			user.value = result.data.data
		}
		
		
	})

	const secure = () => {
		uni.navigateTo({
			url: "/pages/secure/secure"
		})
	}
	const bank = () => {
		uni.navigateTo({
			url: "/pages/bank/bank"
		})
	}
	const property = () => {
		uni.navigateTo({
			url: "/pages/property/property"
		})
	}
	const invite = () => {
		uni.navigateTo({
			url: "/pages/invite/invite"
		})
	}
	const logout = ()=>{

		uni.showModal({
			title:"提示",
			content:"是否确认退出登录",
			success:(ret)=>{
				if(ret.confirm){
					uni.clearStorage()
					uni.reLaunch({
						url:"/pages/index/index"
					})
				}
			}
		})
		
	}
</script>

<style lang="scss" scoped>
	.submit {
		width: 630rpx;
		height: 92rpx;
		background: #f00;
		border-radius: 16rpx;
		margin-top:200rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 92rpx;
	}
	.list {
		margin: 16rpx auto 0;
		width: 670rpx;
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 128rpx;
			view {
				display: flex;
				align-items: center;
				image {
					width: 48rpx;
					height: 48rpx;
					display: block;
					margin-right: 32rpx;
				}

				text {
					color: #181D29;
					font-size: 32rpx;
					font-weight: bold;
					display: block;
				}
			}

			>image {
				width: 40rpx;
				height: 40rpx;
				display: block;
			}
		}
	}

	.ad {
		width: 670rpx;
		margin: 0 auto;
		display: block;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.ad-box {
		// border-top: 1rpx solid #ccc;
		height: 210rpx;
	}

	.property {
		width: 670rpx;
		margin: 52rpx auto 0;
		position: relative;
		height: 104rpx;

		image {
			position: absolute;
			top: 0;
			width: 670rpx;
			height: 104rpx;
		}

		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			width: 606rpx;
			height: 104rpx;
			padding: 0 32rpx;

			.label {
				color: #E3BC8A;
				font-size: 28rpx;
				font-weight: 500;
				margin-right: 32rpx;
				display: block;
			}

			.value {
				color: #E3BC8A;
				font-size: 42rpx;
				font-weight: 500;
			}
		}
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 670rpx;
		margin: 30rpx auto 0;

		view {
			.name {
				color: #181D29;
				font-size: 48rpx;
				font-weight: 500;
				display: block;
				margin-bottom: 8rpx;
			}

			.id {
				color: #181D29;
				font-size: 28rpx;
			}
		}

		image {
			display: block;
			width: 152rpx;
			height: 152rpx;
			border-radius: 50%;
		}
	}
</style>